<template>
	<view class="content">
		<view class="list">
			<view class="row">
				<view class="title">头像</view>
				<view class="right">
					<view class="tis">
						<image :src="user.face" mode="widthFix"></image>
					</view>
					<view class="icon xiangyou"></view>
				</view>
			</view>
			<view class="row">
				<view class="title">昵称</view>
				<view class="right">
					<view class="tis">{{user.username}}</view>
					<view class="icon xiangyou"></view>
				</view>
			</view>
			<view class="row">
				<view class="title">个性签名</view>
				<view class="right">
					<view class="tis">这人太懒了，什么都不写</view>
					<view class="icon xiangyou"></view>
				</view>
			</view>
		</view>
		<button type="primary" class="entry_button" @click="goLogin()">点击登录，羽你同行</button>
		<public-module></public-module>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				//个人信息,
				user: {
					username: "",
					face: "",
				},
			};
		},
		mounted() {
			this.user.username = wx.getStorageSync('nickName');
			this.user.face = wx.getStorageSync('avatarUrl');
		},
		onShow() {
			this.user.username = wx.getStorageSync('nickName');
			this.user.face = wx.getStorageSync('avatarUrl');
		},
		methods: {
			...mapMutations(['setLoginPopupShow']),
			goLogin() {
				//判断缓存中是否有用户数据（也就是判断有没有登录）
				if (!uni.getStorageSync('encryptedData')) {
					console.log("系统无缓存，请求登录");
					getApp().globalData.loginModal = 1;
					this.setLoginPopupShow(true);
				} else {
					uni.showToast({
						title: "请勿重复登录",
						icon: 'none',
						duration: 2000
					})
				}
			},
			showType(tbIndex) {
				this.tabbarIndex = tbIndex;
				this.list = this.orderList[tbIndex];
			}
		},
	}
</script>

<style lang="scss">
	page {
		background-color: #f3f3f3;
	}

	.icon {
		font-size: 30upx;

	}

	.content {
		padding-bottom: 20upx;

		.list {
			width: 96%;
			padding-left: 4%;
			background-color: #fff;
			margin-bottom: 20upx;

			.row {
				widows: 100%;
				min-height: 90upx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: solid 1upx #eee;

				&:last-child {
					border-bottom: none;
				}

				.title {
					font-size: 32upx;
					color: #333;
				}

				.right {
					display: flex;
					align-items: center;
					color: #999;

					.tis {
						font-size: 26upx;
						margin-right: 5upx;
						max-height: 120upx;

						image {
							width: 100upx;
							height: 100upx;
							border-radius: 100%;
							margin: 10upx 0;
						}
					}

					.icon {
						width: 40upx;
						color: #cecece;
					}
				}

			}
		}
	}

	.entry_button {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: 60%;
		background-color: green;
		color: white;
		padding: 5px 15px;
		border: none;
		border-radius: 10px;
		cursor: pointer;
		width: 220px;
		/* 设置按钮宽度 */
		height: 55px;
		/* 设置按钮高度 */
	}
</style>